<template>
    <div class="mybtn_group">
        <label for="">{{title}}:</label>
        <div class="ui buttons tiny">
            <div class="ui button" :class="{active:_val==btn.id}" @click.stop.prevent="btnClick(btn.id)" v-for="btn in btns">{{btn.title}}</div>
        </div>
    </div>
</template>
<script>
    import tool from 'src/util/tool'
    import util from '_util/index';

    export default {
        data() {
            return {}
        },
        computed: {
          _val(){
              return this.$route.query[this.field]||this.def;
          }
        },
        watch: {
            page: function (val, old) {
                if (val && val != this.current_page) {
                    this.changePage(val);
                }
            }
        },
        methods: {
            btnClick(id){
                if (this.confirm)
                    util.showConfirm(this, () => {
                        this.$emit('btnClick', id, this.field);
                    });
                else
                    this.$emit('btnClick', id, this.field);
            }
        },
        components: {},
        props: ['btns', 'title', 'field', 'confirm', 'filter', 'def']
    };
</script>
<style rel="stylesheet/less" scoped lang="less">@dir: "common/";

.mybtn_group {
    display: inline-block;
    margin-left:10px;
    .buttons {
        margin-left: 5px;
    }
}
</style>
